<template>
  <section class="homepage-news">
    <div class="news-title">
      <span class="title-content">
        资讯展示
      </span>
    </div>
    <img class="news-img" src="../../../assets/front/img/news_img.png">
    <div class="news-list">
      <div v-for="(item,index) in news" :key="index" class="news-item" @click="goToView(index)">
        {{item.title}}
      </div>
    </div>
  </section>
</template>

<script>
import HomepageAPI from '@/api/homepage/homepage';
export default {
    data() {
        return {
            news: [
            ]
        };
    },
    mounted() {
        this.getArticles();
    },
    methods: {
        getArticles() {
            HomepageAPI.getInfo({ size: 4 })
                .then(res => {
                    this.news = res.obj;
                });
        },
        goToView(index) {
            this.$router.push('/f/info/' + this.news[index].id);
        }
    }
};
</script>

<style lang="scss">
  @import "../../../assets/front/front";

  .homepage-news {
    box-sizing: padding-box;
    padding: 10px;
    width:210px;
    height:260px;
    background-color: white;
    .news-title {
      height:25px;
      .title-content {
        padding-bottom:6px;
        height:20px;
        color:$main-color;
        border-bottom: 2px solid $main-color;
      }
      border-bottom: 1px solid $bg-color;
    }

    .news-img {
      margin:20px auto;
      width:180px;
      display: block;
    }

    .news-list {
      margin:0 auto;
      width:180px;
      .news-item {
        width: 100%;
        height:24px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:12px;
        color:$font-gray-color;
        cursor: pointer;
      }
    }
  }



</style>
